<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <a href="/home">首页</a>
        <a href="/service">服务</a>
        <a href="/mine">个人中心</a>
    </div>

    <div class="content">

    </div>
</body>

</html>
<script>
    //history路由
    //思路：点击不同的按钮，通过history.pushState()切换不同的路由地址，然后根据不同的路由地址调用不同的函数 渲染不同的内容

    //获取所有的a标签
    let aEle = document.querySelector('a')
    //循环遍历每一个a标签
    aEle.forEach((item) => {
        //给每个a标签绑定点击事件
        item.onclick = function (e) {

            //清除a标签的默认行为
            e.preventDefault()
            //借助 history 对象的 pushState()方法 添加一个新的历史记录(地址栏的地址会发生改变)
            //注意：pushState()必须在非 file：// 协议下调用
            //语法：history.pushState(历史记录的状态，保留字符串，url地址)
            //this.href 获取的是 当前点击的a标签的href属性值

            history.pushState({ title: '', url: '' }, '', this.href)

            //location.pathname 获取的是点击后最新的url路径
            //根据不同的url地址，渲染不同的内容

            switch (location.pathname) {
                case '/home': homePage(); break
                case '/service': servicePage(); break
                case '/mine': minePage(); break
            }

            //return false //组织a标签的默认行为（跳转到其他页面）
        }
    })

    //渲染首页的内容
    function homePage() {
        document.querySelector('.contant').innerHTML = '这是首页'

    }

    //渲染服务的内容
    function servicePage() {
        document.querySelector('.contant').innerHTML = '很高兴为您服务'
    }

    //渲染个人中心的内容
    function minePage() {
        document.querySelector('.contant').innerHTML = '个人中心'
    }
</script>